<template>
	<view class="container" :style="'padding-top:'+ navHeight+'px;'">
		<view class="nav_top">
			<view class="row">
				<view class="col-8 off-1 t_size_26">
					<!-- {{city}}<text class="iconfont icon-xiajiantou"></text> -->
				</view>
				<view class="t_center col-6 t_size_28 t_size_bold">
					六时出行
				</view>
			</view>
		</view>
		<view class="nav_bottom">
			<view class="row">
				<view class="col-3 off-1 user_icon t_left">
					<block v-if="token == ''">
						<button type="primary" @click="getUserInfo">
							<image src="../../static/index/user_icon.png" mode="heightFix"></image>
						</button>
					</block>
					<block v-else>
						<button type="primary" @click="clickHead">
							<image src="../../static/index/user_icon.png" @click="clickHead" mode="heightFix"></image>
						</button>
					</block>
				</view>
				<view class="col-16">
					<view class="row row_center">
						<view class="col-8 set-1" :class="cindex==0?'rebla_active': 'rebla'" @click="change_index(0)">
							<view class="re_title t_center">
								合乘
							</view>
							<view class="re_bg">
								<image src="../../static/index/user_bg.png" mode="widthFix"></image>
							</view>
						</view>
						<view class="col-8" :class="cindex==0?'rebla': 'rebla_active'" @click="change_index(1)">
							<view class="re_title t_center">
								专车
							</view>
							<view class="re_bg">
								<image src="../../static/index/user_bg.png" mode="widthFix"></image>
							</view>
						</view>
					</view>
				</view>
				<view class="col-3 set-1 user_scan t_right">
					<image src="../../static/index/user_scon.png" @click="openScan" mode="heightFix"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'tabs-conts',
		props: {
			city:{
				type: String,
				default:()=>{
					return ''
				}
			},
			cindex: {
				type: Number,
				default: () => {
					return 0
				}
			},
			token: {
				type: String,
				default:()=>{
					return uni.getStorageSync('token')
				}
			}
		},
		data() {
			return {
				navHeight: 0
			}
		},
		created() {
			// #ifdef MP-WEIXIN
			let that = this;
			wx.getSystemInfo({
				success: res => {
					that.navHeight = res.statusBarHeight;
				}
			})
			// #endif
		},
		methods: {
			clickHead() {
				this.$emit('clickHead', 'clickHead')
			},
			openScan() {
				let that = this;
				uni.scanCode({
					success(res) {
						that.$emit('scanCode', res)
					}
				})
			},
			change_index(e) {
				this.$emit('changIndex', e)
			},
			changeToken(e){
				this.$emit('changeToken',e)
			},
			getUserInfo(e) {
				let that = this;
				// #ifdef MP-WEIXIN
				uni.showLoading()
				wx.getUserProfile({
					desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
					success: (res) => {
						wx.login({
							success:async (e)=>{
								let result = await that.$api.request(that.$api.user.getUserByCode,{
									code: e.code,
									nickName: res.userInfo.nickName,
									photo: res.userInfo.avatarUrl
								})
								if(result){
									if(result.telephone == ''){
										uni.setStorageSync('login_result',JSON.stringify(result))
										that.$public.navTo(`login/login`)
									}else{
										that.changeToken(result.accessToken)
									}
									uni.hideLoading()
								}
							}
						})
					}
				})
				// #endif
			}
		}
	}
</script>

<style lang="scss">
	.container {
		width: 100vw;
		box-shadow: 0px 5px 10px 0px #E6E6E6;

		.nav_top {
			width: 100%;
			height: 40px;
			line-height: 40px;
			color: #333333;

			.t_size_26 {
				text {
					margin-left: 11rpx;
				}
			}
		}

		.nav_bottom {
			width: 100%;
			height: 40px;
			line-height: 40px;

			.user_icon {
				button {
					width: 100%;
					margin: 0;
					background-color: #FFFFFF;
					padding: 0;
					height: 100%;
					border: 0;

					&::after {
						border: 0;
					}

					image {
						height: 70%;
						margin-top: 5%;
					}
				}
			}

			.row_center {
				justify-content: center;

				.rebla,
				.rebla_active {
					position: relative;

					.re_title {
						width: 100%;
						position: absolute;
						// bottom: 0;
						left: 0;
						z-index: 2;
						color: #333333;
					}

					.re_bg {
						width: 100%;
						position: absolute;
						top: 5px;
						z-index: 1;
						display: none;

						image {
							width: 70%;
							margin-left: 15%;
						}
					}
				}

				.rebla_active {
					.re_title {
						color: #353535;
						font-weight: bold;
					}

					.re_bg {
						display: block;
					}
				}
			}

			.user_scan {
				image {
					height: 60%;
					margin-top: 20%;
				}
			}
		}
	}
</style>
